<template>
  <div :device="device" :sub="sub" class="dev-container">
    <div class="dev-header">
      <div class="dev-icon-wrapper card-icon">
        <svg-icon icon-class="control" class-name="dev-icon" />
      </div>
      <div class="dev-info">
        <div class="dev-info-name"> {{ device.name }} </div>
        <div class="dev-info-position"> {{ device.position }} </div>
        <div v-if="device.online === 1" class="dev-online"> 在线 </div>
        <div v-else class="dev-offline"> 离线 </div>
      </div>
      <div style="float:right;margin:10px;">
        <!-- <el-button type="success" size="large" @click="toSet(device)"> 设置 </el-button> -->
        <el-button type="success" size="large" @click="onGetPin(device)"> 获取状态 </el-button>
      </div>
    </div>

    <div class="dev-body">
      <div v-for="(item, index) in device.value.pin" :key="index">
        <div class="pin">
          <div class="pin-info-name"> {{ item.name }} </div>

          <div class="infrared">
            <div v-if="item.status === 1" class="infrared-anybody"> {{ item.status | statusFilter(item.values) }} </div>
            <div v-else-if="item.status === 0" class="infrared-nobody"> {{ item.status | statusFilter(item.values) }} </div>
            <div v-else class="infrared-err"> 无 </div>
          </div>

          <div class="pin-info-position"> {{ item.position }} </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { CMD_CONTROL } from '@/utils/cmd'

export default {
  name: 'Control',
  components: { },
  filters: {
    typeFilter(status) {
      if (status === -1) {
        return 'danger'
      } else if (status === 0) {
        return 'success'
      } else if (status === 1) {
        return 'danger'
      } else if (status === 2) {
        return 'danger'
      }
    },
    statusFilter(status, values) {
      for (var i = 0; i < values.length; i++) {
        if (status === values[i].value) {
          return values[i].name
        }
      }
    },
    // statusFilter(status) {
    //   if (status === -1) {
    //     return '异常'
    //   } else if (status === 0) {
    //     return '正常'
    //   } else {
    //     return '开启'
    //   }
    // },
    modeFilter(mode) {
      if (parseInt(mode) === 1) {
        return '输入'
      }
      if (parseInt(mode) === 2) {
        return '输出'
      }
    }
  },
  props: {
    id: {
      type: Number,
      default: 0
    },
    device: {
      type: Object,
      default: null
    },
    value: {
      type: Object,
      default: null
    },
    name: {
      type: String,
      default: null
    },
    sub: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      resetPosition: 0,
      showHeader: false,
      tableWidth: '150',
      dialogSelectPosFormVisible: false,
      selectIndex: 0,
      currentPositions: [],
      currentPosition: null,
      current_pin: null,
      current_index: null
    }
  },
  watch: {
    device: {
      deep: true,
      handler(val) {
        this.setDevice(val)
      }
    }
  },
  created() {
  },
  methods: {
    setDevice(val) {
      this.device = val
    },
    // 跳转到设置界面
    toSet(device) {
      console.log('编辑运动轴设备...')
      this.$router.push({ path: '/device/control/set', query: device })
    },
    onGetPin(item) {
      item.value.switch = 0
      this.publish(item.sub, JSON.stringify({
        code: CMD_CONTROL.get_pin.toString(),
        msg: '0'
      }))
    },
    publish(topic, message) {
      console.log('推送消息')
      console.log('topic:' + topic)
      console.log('message:' + message)
      this.$mqtt.publish(topic, message)
    }
  }
}
</script>

<style lang="scss" scoped>

.offline {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.dev-container {
  margin: 10px;
  background: #fff;
  width: 100%;
  transition: 0.3s;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 10px;
  &:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
}

.dev-header {
    background:#fff;
    height: 110px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: #666;
    border-color: rgba(0, 0, 0, .55);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom:1px solid #ccc;
    // &:hover {
    //   .dev-icon-wrapper {
    //     color: #fff;
    //   }

    //   .card-icon{
    //     background: #40c9c6;
    //   }
    // }
    .dev-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
      color: #40c9c6;
    }

    .dev-icon {
      float: left;
      font-size: 48px;
    }

    .dev-info {
      float: left;
      font-weight: bold;
      margin: 26px;
      .dev-info-name {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
        margin-bottom: 12px;
      }
      .dev-info-position {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .dev-online {
        line-height: 18px;
        color: rgba(0, 255, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .dev-offline {
        line-height: 18px;
        color: rgba(255, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
    }
  }

.dev-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px 5px;
  padding: 20px;
  .pin {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 10px 10px;
    padding: 10px;
    background: #fff;
    border-color: rgba(0, 0, 0, .25);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 10px;
    .pin-info-name {
      font-weight: bold;
      color: rgba(0, 0, 0, 0.45);
      font-size: 32px;
    }
    .pin-info-position {
      color: rgba(0, 0, 0, 0.45);
      font-size: 16px;
    }
    .infrared {
      float: right;
      font-weight: bold;
      .infrared-anybody {
        color: rgba(250, 0, 0, 0.45);
        font-size: 32px;
      }
      .infrared-nobody {
        color: rgba(0, 250, 0, 0.45);
        font-size: 32px;
      }
      .infrared-err {
        color: gray;
        font-size: 32px;
      }
    }
  }

}
</style>
